<template>
    <div class="my-5">
        <table class="table table-dark table-striped text-center">
            <thead>
                <tr>
                    <th scope="col">pid</th>
                    <th scope="col">ptime</th>
                    <th scope="col">paddr</th>
                    <th scope="col">price</th>
                </tr>
            </thead>
            <tbody>
                <template v-if="typeof myStore.getArr[0] == 'object'">
                    <tr v-for="item in myStore.arr" :key="item.pid">
                        <td scope="row">{{ item.pid }}</td>
                        <td>{{ item.ptime }}</td>
                        <td>{{ item.paddr }}</td>
                        <td>{{ item.price }}</td>
                    </tr>
                </template>
                <template v-else>
                    <tr>
                        <td colspan="4" class="text-danger"><h1>{{ myStore.arr }}</h1></td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</template>

<script setup>
// import { ref } from "vue";
import useMyStore from './store';

const myStore = useMyStore()



</script>

<style lang="scss" scoped></style>